<script setup name="CommentEdit">
	import {ref, reactive} from 'vue'
	import {useRouter, useRoute} from "vue-router"
    import addressApi from '@/api/member/address'
    import {areaList} from '@vant/area-data'
    import { showNotify } from 'vant'
    import { showConfirmDialog } from 'vant'

	const router = useRouter()
	const route = useRoute()

    const address = ref({})

    const addressId = route.query.id
    const initData = () => {
        if (addressId) {
            addressApi.getAddressDetailsById(addressId).then(response => {
                address.value = response.data
            })
        }
    }
    initData()

    const handleSave = (info) => {
	    if(info.id){
            addressApi.updateAddress(info).then(response => {
                showNotify({ type: 'primary', message: '操作成功' })
                router.back()
            })
        }else {
            addressApi.saveAddress(info).then(response => {
                showNotify({ type: 'primary', message: '操作成功' })
                router.back()
            })
        }

    }

    const handleDelete = () => {
        showConfirmDialog({
            message:
                '确实删除该地址吗？',
        }).then(() => {
            // on confirm
            addressApi.deleteById(addressId).then(response => {
                showNotify({ type: 'primary', message: '删除成功' })
                router.back()
            })
        }).catch(() => {
            // on cancel
        })
    }


</script>

<template>
	<van-nav-bar title="编辑地址" left-text="返回" left-arrow @click-left="$router.back()"/>

	<van-address-edit
			:address-info="address"
			:area-list="areaList"
			show-postal
			show-delete
			show-set-default
			show-search-result
			:area-columns-placeholder="['请选择', '请选择', '请选择']"
			@save="handleSave"
			@delete="handleDelete"
	/>

</template>
